<!doctype html>
<html lang="en">
<head>
    <% include head.ejs %>
</head>
<style>
    body {
        padding-top: 0px;
    }
    form {
        padding-left:20px;
        text-align: left;
    }
</style>
<body>
<% include second_nav.ejs %>
<header class="jumbotron site-header-2">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>北斗产品</h2>
                <p>专业、高效</p>

                <form role="search">
                    <div id="form-group" class="form-group">
                        <input id="input-search" name="keyword" type="text" class="search form-control" placeholder="搜索技术应用"/>
                        <i class="fa fa-search"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
</header>
<div class="container">
    <div class="row clearfix">
        <div class="col-sm-12">

            <div class="course-list" style="margin-top: 10px;">
                <div class="js-course-list">
                    <ul id="list-content" class="list-unstyled">


                        <li><a href="/view/342">
                                <div class="course-list-img"><img width="280" height="160" alt="C++远征之起航篇"
                                                                  src="http://img.mukewang.com/550b86560001009406000338-300-170.jpg">
                                </div>
                                <h5><span>C++远征之起航篇</span></h5>

                                <div class="intro"><p>C++亮点尽在其中</p><span class="l new">更新至5-1</span> <span class="r">课程时长：1小时0分</span>
                                </div>
                                <div class="tips"><span class="l new">45分钟前更新</span> <span class="r">47人学习</span></div>
                            </a></li>
                        <li><a href="/view/352">
                                <div class="course-list-img"><img width="280" height="160" alt="细说Java多线程之内存可见性"
                                                                  src="http://img.mukewang.com/5518c3d7000175af06000338-300-170.jpg">
                                </div>
                                <h5><span>细说Java多线程之内存可见性</span></h5>

                                <div class="intro"><p>用两种方式实现内存可见性
                                    </p><span class="l new">更新至5-1</span> <span class="r">课程时长：1小时0分</span></div>
                                <div class="tips"><span class="l new">3小时前更新</span> <span class="r">126人学习</span></div>
                            </a></li>
                        <li><a href="/view/355">
                                <div class="course-list-img"><img width="280" height="160" alt="Tony老师聊shell——运算符"
                                                                  src="http://img.mukewang.com/551916790001125706000338-300-170.jpg">
                                </div>
                                <h5><span>Tony老师聊shell——运算符</span></h5>

                                <div class="intro"><p>Tony为你带来shell编程中的运算符！</p><span class="l new">更新至3-1</span> <span
                                            class="r">课程时长：45分</span></div>
                                <div class="tips"><span class="l new">20小时前更新</span> <span class="r">462人学习</span></div>
                            </a></li>
                        <li><a href="/view/350">
                                <div class="course-list-img"><img width="280" height="160" alt="鬼斧神工之正则表达式"
                                                                  src="http://img.mukewang.com/5518bbe30001c32006000338-300-170.jpg">
                                </div>
                                <h5><span>鬼斧神工之正则表达式</span></h5>

                                <div class="intro"><p>正则表达式是计算机编程语言界的鬼斧神工。</p><span class="l">更新至3-11</span> <span
                                            class="r">课程时长：2小时10分</span></div>
                                <div class="tips"><span class="l">1天前更新</span> <span class="r">2231人学习</span></div>
                            </a></li>
                        <li><a href="/view/347">
                                <div class="course-list-img"><img width="280" height="160" alt="如何使用高德JS-API进行基于LBS的开发"
                                                                  src="http://img.mukewang.com/5513a1b50001752806000338-300-170.jpg">
                                </div>
                                <h5><span>如何使用高德JS-API进行基于LBS的开发</span></h5>

                                <div class="intro"><p>教你迅速用高德JS-API进行基于LBS的开发</p><span class="l">更新至6-1</span> <span
                                            class="r">课程时长：1小时38分</span></div>
                                <div class="tips"><span class="l">2天前更新</span> <span class="r">531人学习</span></div>
                            </a></li>
                        <li><a href="/view/349">
                                <div class="course-list-img"><img width="280" height="160" alt="Duang~MySQLi扩展库来袭"
                                                                  src="http://img.mukewang.com/5513e20600017c1806000338-300-170.jpg">
                                </div>
                                <h5><span>Duang~MySQLi扩展库来袭</span></h5>

                                <div class="intro"><p>Duang~一起开启MySQLi的学习之旅吧!</p><span class="l">更新至5-3</span> <span
                                            class="r">课程时长：2小时56分</span></div>
                                <div class="tips"><span class="l">2天前更新</span> <span class="r">635人学习</span></div>
                            </a></li>
                        <li><a href="/view/239">
                                <div class="course-list-img"><img width="280" height="160" alt="打造个性的图片预览与多点触控"
                                                                  src="http://img.mukewang.com/546c0d940001f49e06000338-300-170.jpg">
                                </div>
                                <h5><span>打造个性的图片预览与多点触控</span></h5>

                                <div class="intro"><p>学习如何实现图片自由缩放与多点触控效果</p><span class="l">共6章13节</span> <span
                                            class="r">课程时长：1小时54分</span></div>
                                <div class="tips"><span class="l">更新完毕</span> <span class="r">2615人学习</span></div>
                            </a></li>
                        <li><a href="/view/338">
                                <div class="course-list-img"><img width="280" height="160" alt="canvas实现星星闪烁特效"
                                                                  src="http://img.mukewang.com/550a33b00001738a06000338-300-170.jpg">
                                </div>
                                <h5><span>canvas实现星星闪烁特效</span></h5>

                                <div class="intro"><p>使用HTML5实现轮播图片上的序列帧。</p><span class="l">更新至3-2</span> <span
                                            class="r">课程时长：1小时0分</span></div>
                                <div class="tips"><span class="l">6天前更新</span> <span class="r">4150人学习</span></div>
                            </a></li>
                        <li><a href="/view/61">
                                <div class="course-list-img"><img width="280" height="160" alt="用less写个新浪微博"
                                                                  src="http://img.mukewang.com/54816db200011c6806000338-300-170.jpg">
                                </div>
                                <h5><span>用less写个新浪微博</span></h5>

                                <div class="intro"><p>用less构建新浪微博的个人主页。</p><span class="l">更新至3-1</span> <span
                                            class="r">课程时长：1小时30分</span></div>
                                <div class="tips"><span class="l">2015-03-25更新</span> <span class="r">4228人学习</span>
                                </div>
                            </a></li>
                        <li><a href="/view/340">
                                <div class="course-list-img"><img width="280" height="160" alt="高德地图组件快速入门"
                                                                  src="http://img.mukewang.com/550a836c0001236606000338-300-170.jpg">
                                </div>
                                <h5><span>高德地图组件快速入门</span></h5>

                                <div class="intro"><p>教你迅速使用地图组件进行基于LBS的开发</p><span class="l">更新至1-1</span> <span
                                            class="r">课程时长：17分</span></div>
                                <div class="tips"><span class="l">2015-03-24更新</span> <span class="r">2464人学习</span>
                                </div>
                            </a></li>
                        <li><a href="/view/341">
                                <div class="course-list-img"><img width="280" height="160" alt="如何使用高德定位进行开发"
                                                                  src="http://img.mukewang.com/550a87da000168db06000338-300-170.jpg">
                                </div>
                                <h5><span>如何使用高德定位进行开发</span></h5>

                                <div class="intro"><p>教你迅速使用定位进行基于LBS的开发</p><span class="l">更新至3-1</span> <span
                                            class="r">课程时长：1小时4分</span></div>
                                <div class="tips"><span class="l">2015-03-24更新</span> <span class="r">1682人学习</span>
                                </div>
                            </a></li>
                        <li><a href="/view/344">
                                <div class="course-list-img"><img width="280" height="160" alt="Linux系统扫描技术及安全防范"
                                                                  src="http://img.mukewang.com/5510c2c500016e9e06000338-300-170.jpg">
                                </div>
                                <h5><span>Linux系统扫描技术及安全防范</span></h5>

                                <div class="intro"><p>在Linux系统下实现系统扫描及安全防范。</p><span class="l">共7章20节</span> <span
                                            class="r">课程时长：1小时41分</span></div>
                                <div class="tips"><span class="l">更新完毕</span> <span class="r">2542人学习</span></div>
                            </a></li>
                        <li><a href="/view/343">
                                <div class="course-list-img"><img width="280" height="160"
                                                                  alt="Android图像处理-变&quot;换&quot;莫测的图像"
                                                                  src="http://img.mukewang.com/551a15d80001574406000338-300-170.jpg">
                                </div>
                                <h5><span>Android图像处理-变"换"莫..</span></h5>

                                <div class="intro"><p>了解Android中对图像变形的分析与处理</p><span class="l">共5章10节</span> <span
                                            class="r">课程时长：2小时8分</span></div>
                                <div class="tips"><span class="l">更新完毕</span> <span class="r">2563人学习</span></div>
                            </a></li>
                        <li><a href="/view/337">
                                <div class="course-list-img"><img width="280" height="160" alt="Oracle数据库开发必备利器之SQL基础"
                                                                  src="http://img.mukewang.com/55063fc600019d0006000338-300-170.jpg">
                                </div>
                                <h5><span>Oracle数据库开发必备利器之SQL基础</span></h5>

                                <div class="intro"><p>为你带来Oracle数据库开发必备的sql基础。</p><span class="l new">更新至7-1</span>
                                    <span class="r">课程时长：4小时0分</span></div>
                                <div class="tips"><span class="l new">18小时前更新</span> <span class="r">4490人学习</span>
                                </div>
                            </a></li>
                        <li><a href="/view/336">
                                <div class="course-list-img"><img width="280" height="160" alt="shell编程基础之变量"
                                                                  src="http://img.mukewang.com/55063ec30001774b06000338-300-170.jpg">
                                </div>
                                <h5><span>shell编程基础之变量</span></h5>

                                <div class="intro"><p>Tony老师为您带来shell编程基础中的变量！</p><span class="l">共2章7节</span> <span
                                            class="r">课程时长：1小时50分</span></div>
                                <div class="tips"><span class="l">更新完毕</span> <span class="r">4640人学习</span></div>
                            </a></li>
                        <li><a href="/view/333">
                                <div class="course-list-img"><img width="280" height="160" alt="快乐的sublime编辑器"
                                                                  src="http://img.mukewang.com/5502bbdd0001a8a606000338-300-170.jpg">
                                </div>
                                <h5><span>快乐的sublime编辑器</span></h5>

                                <div class="intro"><p>展示sublimeText,讲透它的使用哲学。</p><span class="l">更新至13-1</span> <span
                                            class="r">课程时长：1小时1分</span></div>
                                <div class="tips"><span class="l">2天前更新</span> <span class="r">11488人学习</span></div>
                            </a></li>
                        <li><a href="/view/302">
                                <div class="course-list-img"><img width="280" height="160" alt="Android图像处理-打造美图秀秀从它开始"
                                                                  src="http://img.mukewang.com/54bf7e1f000109c506000338-300-170.jpg">
                                </div>
                                <h5><span>Android图像处理-打造美图秀秀从它开始</span></h5>

                                <div class="intro"><p>了解Android中对图像色彩的分析与处理</p><span class="l">更新至3-3</span> <span
                                            class="r">课程时长：2小时0分</span></div>
                                <div class="tips"><span class="l">2015-03-13更新</span> <span class="r">5042人学习</span>
                                </div>
                            </a></li>
                        <li><a href="/view/256">
                                <div class="course-list-img"><img width="280" height="160" alt="CSS深入理解之overflow"
                                                                  src="http://img.mukewang.com/54c1a5880001aa9106000338-300-170.jpg">
                                </div>
                                <h5><span>CSS深入理解之overflow</span></h5>

                                <div class="intro"><p>深入理解overflow相关特性及各类实际应用。</p><span class="l">更新至6-1</span> <span
                                            class="r">课程时长：1小时0分</span></div>
                                <div class="tips"><span class="l">2天前更新</span> <span class="r">5269人学习</span></div>
                            </a></li>
                        <li><a href="/view/331">
                                <div class="course-list-img"><img width="280" height="160" alt="CSS3实现漂亮ToolTips效果"
                                                                  src="http://img.mukewang.com/54f962eb0001640806000338-300-170.jpg">
                                </div>
                                <h5><span>CSS3实现漂亮ToolTips效果</span></h5>

                                <div class="intro"><p>CSS3实现鼠标悬停弹出信息提示框。</p><span class="l">共1章6节</span> <span
                                            class="r">课程时长：1小时20分</span></div>
                                <div class="tips"><span class="l">更新完毕</span> <span class="r">9358人学习</span></div>
                            </a></li>

                    </ul>

                    <div id="loading" class="loading-product">
                        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<% include basejs.ejs %>
<!--<script src="/js/list.js"></script>-->

<script src="/js/app.js"></script>
<script>
    $(function() {

        var stop=true;//触发开关，防止多次调用事件
        $(window).scroll(function() {
            //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.
            if ($(this).scrollTop() + $(window).height() + 100 >= $(document).height() && $(this).scrollTop() > 100) {

                if(stop==true){
                    stop=false;
                    $('#loading').show();

                    setTimeout(function () {
                        var liHtml = '';
                        liHtml = '<li><a href="/view/340">'
                              + '<div class="course-list-img"><img width="280" height="160" alt="高德地图组件快速入门"'
                              + 'src="http://img.mukewang.com/550a836c0001236606000338-300-170.jpg">'
                              + '</div>'
                              + '<h5><span>高德地图组件快速入门</span></h5>'
                              + '<div class="intro"><p>教你迅速使用地图组件进行基于LBS的开发</p><span class="l">更新至1-1</span><span'
                              + 'class="r">课程时长：17分</span></div>'
                              + '<div class="tips"><span class="l">2015-03-24更新</span> <span class="r">2464人学习</span>'
                              + '</div>'
                              + '</a></li>';
                        $('#list-content').append(liHtml + liHtml + liHtml);
                        $('#loading').hide();
                        stop = true;
                    },2000);
                }
            }
        });
    });
</script>
</html>